{/* LAYOUT模板 */}
<layout name="layout"/>
{/* import Js,Css */}	
<css href="__PLUGS__/slider/css/slider.css" />
<js  href="__PLUGS__/slider/js/jquery.flexslider-min.js" />
<css href="__PLUGS__/swipe/dist/css/swiper.min.css"/>
<js  href="__PLUGS__/swipe/dist/js/swiper.min.js" />

{/* 图片轮播 */}
<div class="flexslider" id="qs-flexslider">
	<ul class="slides clearfix"> 
		<li style="background:url(__THEMES__/images/pc_mx4proX1_nobt.jpg) 50% 0 no-repeat;" onclick="location.href='{:U('goods/yinxiang')}';">
			<div class="product-links" style="position:absolute;left:50%;top:50%;color:#fff;margin-left:-205px;margin-top:50px;width:330px;height:58px;">
				<div class="look-detail">
					<a href="{:U('goods/yinxiang')}">了解产品>></a>
				</div>
				<div class="buy">
					<a href="{:U('index/index')}">进入音伴尔官网</a>
				</div>
			</div>
		</li>
		<li style="background:url(__THEMES__/images/jigou_large.jpg) 50% 0 no-repeat;" >
			<div class="product-links" style="position:absolute;left:60%;top:60%;color:#fff; width:330px;height:58px;">
			</div>
		</li>
	</ul> 
</div>
<script>
	$(function(){
		$('.flexslider').flexslider({
			directionNav: true,
			pauseOnAction: false
		});
	});
</script>

{/* 产品功能图片展示 */}
<div style="position:relative;padding:0px;margin:0px;width:100%;">
	<img class="lazy" data-original="__THEMES__/images/2-reason.jpg" alt="语文英语学不好的原因" width="100%" style="display:block;margin:auto;"/>
	<img class="lazy" data-original="__THEMES__/images/3-environment.jpg"  alt="营造一个声音学习环境" width="100%" style="display:block;margin:auto;"/>
	<img class="lazy" data-original="__THEMES__/images/dingshi-1.jpg"  alt="找到孩子闲散的时间" width="100%" style="display:block;margin:auto;"/>
	<img class="lazy" data-original="__THEMES__/images/dingshi-2.jpg" alt="为孩子定制一份定时计划" width="100%" style="display:block;margin:auto;"/>
	<img class="lazy" data-original="__THEMES__/images/dingshi-3.jpg" alt="为孩子定制一份定时计划" width="100%" style="display:block;margin:auto;"/>
	<img class="lazy" data-original="__THEMES__/images/4-fengfuneirong.jpg" alt="每个音频课程的作用" width="100%"  style="display:block;margin:auto;"/>
	<img class="lazy" data-original="__THEMES__/images/5-tongbukecheng.jpg" alt="" width="100%" style="display:block;margin:auto;"/>
</div>


<style>
html, body {
    position: relative;
    height: 100%;
}
body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
</style>


<div id="dingshi" class="swiper-container swiper4">
    <div class="swiper-wrapper" >
        <div class="swiper-slide " style="background: url(__THEMES__/images/6bg.png);">
			<div class="w_1200 mauto" style="height:100%;position:relative;">				
				<div style="position:absolute;width:100%;top:60px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;color:#FFFFFF;height:40px;">定时播放 • 添加定时列表  </span>		
					<img src="__PLUGS__/swipe/img/108.png" />					
				</div>
			</div>
        </div>
        <div class="swiper-slide" style="background: url(__THEMES__/images/6bg.png);">
			<div class="w_1200 mauto" style="height:100%;position:relative;">				
				<div style="position:absolute;width:100%;top:100px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;color:#FFFFFF;height:40px;">定时播放 • 添加时间  </span>		
					<img src="__PLUGS__/swipe/img/109.png" />					
				</div>
			</div>
        </div>
        <div class="swiper-slide" style="background: url(__THEMES__/images/6bg.png);">
			<div class="w_1200 mauto" style="height:100%;position:relative;">				
				<div style="position:absolute;width:100%;top:100px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;color:#FFFFFF;height:40px;">定时播放 • 添加音频  </span>		
					<img src="__PLUGS__/swipe/img/110.png" />					
				</div>
			</div>
        </div>
        <div class="swiper-slide" style="background: url(__THEMES__/images/6bg.png);">
			<div class="w_1200 mauto" style="height:100%;position:relative;">				
				<div style="position:absolute;width:100%;top:100px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;color:#FFFFFF;height:40px;">定时播放 • 推送到音箱  </span>		
					<img src="__PLUGS__/swipe/img/111.png" />					
				</div>
			</div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-4"></div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<script>
	var swiper = new Swiper('.swiper4', {
    	pagination: '.swiper-pagination-4',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 3000,
        effect: 'fade',
        autoplayDisableOnInteraction: false
	});
</script>


<div id="yongtu" class="swiper-container swiper5" >
    <div class="swiper-wrapper" >
        <div class="swiper-slide" style="background:#fff;">
			<div class="w_1200 mauto" style="height:100%;position:relative;">				
				<div style="position:absolute;width:100%;top:60px;color:#FFFFFF">
					<span style="display:block;font-size:40px;width:100%;color:#03BEFF">
						用途 • 环境教育 
						<a href="{:U('linian/index')}" style="font-size:16px;text-decoration:underline;color:#404040;font-weight:200;">什么是环境教育?去了解</a>
					</span>		
					<img src="__PLUGS__/swipe/img/112.jpg" />					
				</div>
			</div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-5"></div>
</div>
<script>
	var swiper = new Swiper('.swiper5', {
	    pagination: '.swiper-pagination-5',
    	paginationClickable: true
	});
</script>
	
<include file="Library:lib_lazyload"/>
<include file="Library:service"/>
<include file="Library:footer"/>





